import 'package:distribution_mall_flutter/assets.dart';
import 'package:distribution_mall_flutter/constant/cf_constant.dart';
import 'package:distribution_mall_flutter/constant/constant.dart';
import 'package:distribution_mall_flutter/constant/image_constant.dart';
import 'package:distribution_mall_flutter/ext/toast_ext.dart';
import 'package:distribution_mall_flutter/generated/l10n.dart';
import 'package:distribution_mall_flutter/provider/goods/product_details.dart';
import 'package:distribution_mall_flutter/provider/user/login.dart';
import 'package:distribution_mall_flutter/utils/image_loader.dart';
import 'package:distribution_mall_flutter/router/router.dart';
import 'package:distribution_mall_flutter/router/router.gr.dart';
import 'package:distribution_mall_flutter/utils/storage.dart';
import 'package:distribution_mall_flutter/utils/utils.dart';
import 'package:distribution_mall_flutter/widgets/earn.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:skeletonizer/skeletonizer.dart';

import 'msrp_hint.dart';

class ContentTitle extends ConsumerStatefulWidget {
  const ContentTitle({super.key});

  @override
  ConsumerState createState() => _ContentTitleState();
}

class _ContentTitleState extends ConsumerState<ContentTitle> {
  bool isShowAttach = false;
  final TextStyle miniPrice = const TextStyle(
    color: Colors.black,
    fontSize: 12.7,
    letterSpacing: TextConstant.letterSpacing,
  );

  Future _attachDialog(BuildContext context, Alignment alignment) async {
    if (isShowAttach) {
      return isShowAttach;
    }
    isShowAttach = true;
    SmartDialog.showAttach(
      onDismiss: () async {
        await Future.delayed(const Duration(milliseconds: 100));
        isShowAttach = false;
      },
      targetContext: context,
      usePenetrate: true,
      alignment: alignment,
      animationTime: Duration.zero,
      keepSingle: true,
      clickMaskDismiss: true,
      builder: (_) => const MsrpHint(),
    );
  }

  @override
  Widget build(BuildContext context) {
    final modal = ref.watch(pDetailProvider);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Visibility(
            visible: modal.detail?.suInfo?.saleInfo?.priceRangeInfo
                    ?.displayMaxSuggestedRetailPrice !=
                null,
            child: Container(
              width: double.infinity,
              decoration: BoxDecoration(
                  color: const Color(0xFFF7F7F7),
                  borderRadius: BorderRadius.circular(4)),
              margin: const EdgeInsets.only(left: 8, right: 8, top: 8),
              padding: const EdgeInsets.only(left: 8, top: 10, bottom: 10),
              child: Row(
                children: [
                  Text(
                    '${S.current.msrp}: ₱${modal.detail?.suInfo?.saleInfo?.priceRangeInfo?.displayMaxSuggestedRetailPrice}/Pc',
                    style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                        color: Color(0xFF5483BF)),
                  ),
                  Builder(builder: (context) {
                    return GestureDetector(
                      onTap: () {
                        _attachDialog(context, Alignment.topCenter);
                      },
                      child: Container(
                        margin: const EdgeInsets.only(left: 4),
                        child:
                            // ImageLoader.imageNet(
                            //   ImageConstant.productQuestionMark,
                            //   width: 16,
                            //   isReplace: false,
                            // )
                            Image.asset(
                          Assets.assets_icons_product_question_mark_png,
                          width: 16,
                        ),
                      ),
                    );
                  })
                ],
              ),
            )),
        Container(
          margin: const EdgeInsets.only(left: 16, right: 16, top: 10),
          child: !ref.watch(loginStateProvider)
              ? Skeleton.leaf(
                  child: GestureDetector(
                  onTap: () {
                    appRouter.push(const LoginRoute());
                  },
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        S.current.home_log_in,
                        style: const TextStyle(
                            fontSize: 16.4,
                            color: Color.fromRGBO(84, 131, 191, 1),
                            letterSpacing: TextConstant.letterSpacing,
                            fontWeight: FontWeight.w600),
                      ),
                      const SizedBox(
                        width: 2,
                      ),
                      const Icon(
                        Icons.lock,
                        size: 15,
                        color: Color.fromRGBO(216, 216, 216, 1),
                      )
                    ],
                  ),
                ))
              : Skeleton.leaf(
                  child: Row(
                  children: [
                    // Text(S.current.minimum, style: miniPrice),
                    Utils.currencyWidget(
                        crossAxis: CrossAxisAlignment.end,
                        Utils.formatDouble(modal.detail?.suInfo?.saleInfo
                            ?.priceRangeInfo?.displayPrice),
                        symbolStyle: const TextStyle(
                          fontSize: 14,
                          color: Color.fromRGBO(31, 31, 31, 1),
                          letterSpacing: TextConstant.letterSpacing,
                        ),
                        priceStyle: const TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 26,
                          color: Color.fromRGBO(31, 31, 31, 1),
                          letterSpacing: TextConstant.letterSpacing,
                        ),
                        endSpan: [
                          TextSpan(
                              text: '/${S.current.Pcs}',
                              style: const TextStyle(
                                  fontSize: 14, color: Colors.black))
                        ]),
                    Padding(
                      padding: const EdgeInsets.only(
                        left: 1,
                      ),
                      child: Row(
                        children: [
                          // ImageLoader.imageNet(
                          //   ImageConstant.homeGoodItemArrowLeft,
                          //   isReplace: false,
                          //   height: 10,
                          // ),
                          Image.asset(
                            Assets.assets_icons_home_good_item_arrow_left_png,
                            height: 10,
                          ),
                          EPEarn(
                              marginTop: 0,
                              text: Utils.formatDouble(modal
                                      .detail
                                      ?.suInfo
                                      ?.saleInfo
                                      ?.priceRangeInfo
                                      ?.displayMaxProfitPrice ??
                                  0),
                              endSpan: [
                                TextSpan(
                                    text: '/${S.current.Pcs}',
                                    style: const TextStyle(
                                        fontSize: 14, color: Colors.white))
                              ]),
                        ],
                      ),
                    )
                  ],
                )),
        ),

        Container(
          margin: const EdgeInsets.only(left: 16, right: 16, top: 10),
          child: RichText(
              text: TextSpan(children: [
            TextSpan(
              text: '${modal.detail?.suInfo?.brandName ?? ''} ',
              style: const TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 20,
                  letterSpacing: TextConstant.letterSpacing,
                  color: Colors.black),
            ),
            TextSpan(
              text: ' ${modal.detail?.suInfo?.title ?? ''}',
              style: const TextStyle(
                  fontSize: 16,
                  letterSpacing: TextConstant.letterSpacing,
                  color: Colors.black),
            )
          ])),
        ),
        // Wrap(
        //   children: [
        //     Text(
        //       modal.detail?.suInfo?.brandName ?? '',
        //       style: const TextStyle(
        //           fontWeight: FontWeight.w500,
        //           fontSize: 20,
        //           letterSpacing: TextConstant.letterSpacing,
        //           color: Colors.black),
        //     ),
        //     const SizedBox(
        //       width: 5,
        //     ),
        //     Text(
        //       modal.detail?.suInfo?.title ?? '',
        //       style: const TextStyle(
        //           fontWeight: FontWeight.w500,
        //           fontSize: 16.4,
        //           letterSpacing: TextConstant.letterSpacing,
        //           color: Colors.black),
        //     )
        //   ],
        // ),
      ],
    );
  }
}
